<!DOCTYPE html>
<iframe id="frame"></iframe>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
frame.contentDocument.open();
frame.contentDocument.write(`
  <!DOCTYPE html>
  <style>
    :focus #target {
      background: green;
    }
  </style>
  <div id="focus" tabindex="1">
    <div id="target">This test passes if it does not crash</target>
  </div>
  <script>
    window.anim = target.animate([
      {color: 'green'},
      {color: 'black'},
    ], {
      iterations: Infinity,
      duration: 1000
    });
  \<\/script>
`);
frame.contentDocument.close();
async_test(t => {
  requestAnimationFrame(() => {
    frame.contentDocument.querySelector('#focus').focus();
    requestAnimationFrame(() => {
      // Update style.
      frame.contentWindow.getComputedStyle(
          frame.contentDocument.querySelector('#focus')).backgroundColor;
      // Invalidate style with an animation style change.
      frame.contentWindow.anim.currentTime += 1000;
      frame.contentWindow.internals.setFocused(false);
      t.done();
    });
  });
});
</script>
